<template>
    <div>
        <div class="aaa">
            <h1>vue-cli学习</h1>
            <span>hi,{{username}}</span>
            <hr>
            <button @click="changeUserName">改变用户名</button>
        </div>

        <p style="color: red">---------------------组件初始学习-------------------------</p>
        <div style="height: 250px">
            <Left></Left>
            <Right></Right>
        </div>

        <p style="color: red">---------------------生命周期联系-------------------------</p>
        <div>
            <LifeCycleTest info="app传入信息1" v-if="flag"></LifeCycleTest>
            <button @click="changeFlag">show|hide</button>
        </div>
        <p style="color: red">---------------------父向子传递-------------------------</p>
        <father></father>
        <p style="color: red">---------------------子向父传递-------------------------</p>
        <father2></father2>
        <p style="color: red">---------------------兄弟传递-------------------------</p>
        <father3></father3>
        <p style="color: red">---------------------ref引用学习-------------------------</p>
        <ref-learn></ref-learn>

    </div>
</template>

<script>
    //引用其他组件一、导入组件
    import Left from '@/components/Left.vue';
    import Right from '@/components/Right.vue';
    import LifeCycleTest from  '@/components/LifeCycleTest.vue';
    import father from  '@/components/father-son/father.vue';
    import father2 from  '@/components/son-father/father.vue';
    import father3 from '@/components/brother/father.vue';
    import RefLearn from '@/components/ref-learn/RefLearn.vue';

    //默认导出，这是固定写法
    export default {
        //注意：组件中的data不能是对象，只能是函数
        // data: {
        //     username: '张三'
        // }
        data() {
            return {
                username: '张三',
                flag:true
            }
        },
        methods: {
            changeUserName() {
                this.username = '法外狂徒-' + this.username;
            },
            changeFlag(){
                this.flag = !this.flag;
            }
        },
        //引入其他组件二、在components节点上注册
        components:{
            Left,Right,LifeCycleTest,father,father2,father3,RefLearn
        }
    }
</script>

<style>
    .aaa {
        width: 250px;
        height: 250px;
        background-color: #1b6d85;
    }
</style>

